<template>
  <div class="mine-box van-doc-demo-block">
    <van-nav-bar
      :title="title"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
      class="nav-bar"
    />

  	<van-row style="margin-top:10px;">
  		<van-col span='4'>
  			 <span>地址：</span>
  		</van-col>
  		<van-col span='19' style='text-align: left;overflow-x:scroll' id='copyObjs'>
      <input type="text" disabled="disabled" :value="address" id="copyObj">
  		</van-col>
  		<van-col span='1'>
  			 <span>&nbsp;</span>
  		</van-col>
  	</van-row>
    <button type="button"
      class="copy-text"
      :data-clipboard-text="address"
      @click="CopyUrl">复制地址!</button>
  	<van-row>
  		<van-col span='24'>
  			<div id="qrcode"></div>
  			<p class="qrC">扫一扫二维码</p>
  			<p class="qrC">获取充值地址</p>
  		</van-col>
  	</van-row>
  </div>
</template>

<script>
  import QRCode from 'qrcodejs2'
  import { Toast } from 'vant';
  import { Dialog } from 'vant';
  import Clipboard from 'clipboard';
  export default {
    data(){
      return {
        title: 'usdt充值',
      	address:'',
        lastPageUrl:""
      }
    },
    created(){

    },
    mounted(){
      this.lastPageUrl = sessionStorage.getItem("lastAndNowPage").split('-')[1];
      sessionStorage.setItem("lastAndNowPage",this.lastPageUrl+"-/Recharge");
      this.address = this.$route.query.address
      this.title = this.$route.query.title || 'usdt充值'
      this.geterweima()
    },
    methods:{
      CopyUrl(){
        // let url = document.querySelector('#copyObj');
        // url.select(); // 选择对象
        // document.execCommand("Copy");

        let clipboard = new Clipboard('.copy-text')
        clipboard.on('success', e => {
          Toast('复制成功！');
          // 释放内存
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          // 不支持复制
          Toast('该浏览器不支持自动复制');
          // 释放内存
          clipboard.destroy()
        })
      },
      onClickLeft(){
        this.$router.push(this.lastPageUrl)
      },
    	geterweima(){
        this.qrcode();
      },
      qrcode () {
        var $this = this;
      	let qrcode = new QRCode('qrcode', {
	        width: 200,
	        margin:"0 auto",
	        height: 200, // 高度
	        text: $this.address, // 二维码内容
	        render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
	        background: '#f0f'
	        // foreground: '#ff0'
        })
      },
    }
  }
</script>

<style scoped>
#qrcode{
    width:200px;
    height:auto;
    margin:10px auto;
    margin-top:40px;
}
.mine-box{
	text-align: center;
  height: 100vh;
  background: -webkit-linear-gradient( top,#028aed,#273eec);
  color: #fff;
}
.qrC{
	margin: 0;
}
.nav-bar {
  color: #000;
}
.copy-text{
  margin-top:10px;
  color:#ef9139;
  font-size:14px;
  background-color:transparent;
  border:none;
}
#copyObj{
  background-color:transparent;
  border:none;
  width:100%;
}
</style>
